<!--
描述：我的首页-收件箱组件-新增组件
开发人：桑杨
开发日期：2017年8月30日
-->

<template lang="pug">
  kalix-dialog.user-add(bizKey="receiver"
  size="tiny" title="测试1"
  ref="kalixBizDialog" v-bind:formModel.sync="formModel"
  v-bind:submitCustom="submitCustom")
    div(slot="dialogFormSlot")
      div title:{{formModel.title}}
      el-table(v-bind:data="formModel.rows" style="width: 100%")
        el-table-column(label="Key" width="400")
          template(slot-scope="scope")
            kalix-dict-select(v-model="scope.row.key" appName="admin" dictType="用户类型" v-on:dictSelected="(e)=>{dictSelected(e,scope.row)}")
        el-table-column(label="Value" width="400")
          template(slot-scope="scope")
            el-input(type="text" v-model="scope.row.value")
        el-table-column(fixed="right" label="操作")
          template(slot-scope="scope")
            el-button(v-on:click="clickBtnDeleteRow(item,index)" type="danger" size="mini") del
      div(style="height:2px;background-color:#cccccc;margin:8px 0;")
      el-button(v-on:click="clickBtnAddRow") Add Row
      <!--el-button(v-on:click="openMessage") Open Message-->

</template>

<script type="text/ecmascript-6">
  import {SenderURL} from '../config.toml'
  import FormModel from './model'
  // import Dialog from '@/components/custom/baseDialog.vue'
  // import UserSelect from '@/components/biz/userselect/userselect'

  export default {
    name: 'CommonReceiverTest',
    props: {
      formRules: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        formModel: Object.assign({}, FormModel),
        params: {},
        rules: {
          receiverIds: [{required: true, message: '请输入收件人', trigger: 'blur'}],
          title: [{required: true, message: '请输入标题', trigger: 'blur'}],
          content: [{required: true, message: '请输入内容', trigger: 'blur'}]
        },
        targetURL: SenderURL,
        receiverIds: [],
        multiple: true
      }
    },
    created() {
    },
    components: {
      // KalixDialog: Dialog,
      // KalixUserSelect: UserSelect
    },
    methods: {
      dictSelected(item, row) {
        console.log('item:', item)
        console.log('row:', row)
      },
      /**
       * 删除行
       */
      clickBtnDeleteRow(item, index) {
        this.formModel.rows.splice(index, 1)
        console.log('this.formModel.rows:', this.formModel.rows)
      },
      /**
       * 增加行
       */
      clickBtnAddRow() {
        this.formModel.rows.push({
          key: '',
          value: ''
        })
        // console.log('this.formModel.rows:', this.formModel.title)
      },
      submitCustom(dialog) {
        console.group('Dialog Test Submit Custom')
        console.log('dialog.formModel:', dialog.formModel)
        console.groupEnd()
      },
      onUserSelected(users) {
        console.log('onUserSelected', users)
        let ids = []
        let names = []
        users.forEach(item => {
          ids.push(item.id)
          names.push(item.name)
        })
        this.formModel.receiverIds = ids.join(':')
        this.formModel.receiverNames = names.join(',')
      },
      openMessage() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        setTimeout(() => {
          loading.close()
          this.$KalixMessage.message('success', '成功！', null, 10000)
        }, 5000)
      }
    },
    watch: {
      receiverIds(newValue) {
//        this.formModel.receiverIds = newValue.join(':')
      }
    }
  }
</script>

